<script setup>
	import MusicService from './MusicService.js'

	import {
		onUnload,
		onShow
	} from '@dcloudio/uni-app'

	const {
		src
	} = defineProps({
		type: String,
		src: '',
	})

	const musicService = new MusicService(src)

	const {
		audioData,
		play,
		pause,
		playbackRate,
		seek,
		popupRef,
		sliderChanging,
		sliderChange,
		destroy
	} = musicService
	
	// function startPlay(){
	// 	play(function(item){
	// 		audioData = item;
	// 	})
	// }
	
	onUnload(() => {
		destroy()
	})
</script>

<template>
	<view class="container" @touchmove.stop="">
		<slider class="progress-box" block-size="12" backgroundColor="#E6E6E6" activeColor="#000"
			:value="audioData.value" :max="audioData.max" @change="sliderChange"
			@changing="sliderChanging" />
		<view class="time">
			<text class="t-left">{{ audioData.startTime }}</text>
			<text class="t-right">{{ audioData.duration }}</text>
		</view>
		<view class="play-box">
			<view class="left" @tap="seek(-15)">
				<image class="pic" src="@/static/icon/player/icon-audio-teek.png" mode="aspectFit" />
				<text class="text">15</text>
			</view>
			<view class="play-icon">
				<image class="pause" v-if="!audioData.isPlay" @tap="play"
					src="@/static/icon/player/icon-audio-pause.png" mode="aspectFit" />
				<image class="play" @tap="pause" v-else src="@/static/icon/player/icon-audio-play.png"
					mode="aspectFit" />
			</view>
			<view class="right" @tap="seek(15)">
				<image class="pic" src="@/static/icon/player/icon-audio-teek.png" mode="aspectFit" />
				<text class="text">15</text>
			</view>
		</view>
		<text class="Rate" @tap="popupRef.open()">
			倍速\n
			{{ audioData.playbackRate === 1 ? '1.0' : audioData.playbackRate }}
		</text>
	</view>
	<uni-popup ref="popupRef" background-color="#fff" type="bottom">
		<view class="popup">
			<view class="p-item" hover-class="hover" @tap="playbackRate(1.0)">1.0</view>
			<view class="p-item" hover-class="hover" @tap="playbackRate(1.25)">1.25</view>
			<view class="p-item" hover-class="hover" @tap="playbackRate(1.5)">1.5</view>
			<view class="p-item" hover-class="hover" @tap="playbackRate(2.0)">2.0</view>
		</view>
	</uni-popup>
</template>

<style lang="scss" scoped>
	.container {
		position: relative;
		margin: 0 auto 50rpx;
		width: 654rpx;
		height: 240rpx;
		border-radius: 8rpx;
		background: rgb(246, 246, 246);
		padding-top: 52rpx;

		.progress-box {
			position: relative;
			margin: 0 auto;
			padding: 0;
			width: 540rpx;
			height: 4rpx;
			border-radius: 2rpx;

			&::before {
				display: none;
			}

			:deep(.wd-slider__button-wrapper) {
				padding: 10rpx;
				top: 50%;
				width: 36rpx;
				height: 36rpx;

				.wd-slider__button {
					width: 100%;
					height: 100%;
					border: 0;
				}
			}
		}

		.time {
			margin-top: 56rpx;
			margin-left: calc(50% - 270rpx);
			padding: 0 16rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			position: absolute;
			top: 20rpx;
			width: 540rpx;
			color: rgb(51, 51, 51);

			.t-left,
			.t-right {
				font-family: PingFang;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: center;
			}
		}

		.Rate {
			position: absolute;
			right: 15rpx;
			bottom: 20rpx;
			color: rgb(51, 51, 51);
			font-family: PingFang;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 36rpx;
			text-align: center;
			z-index: 0;
		}

		.play-box {
			margin-top: 43rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;

			.play-icon {
				margin: 0 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				border: 6rpx solid #000;

				.pause {
					margin-left: 8rpx;
					width: 35rpx;
					height: 45rpx;
				}

				.play {
					width: 51rpx;
					height: 51rpx;
				}
			}

			.left,
			.right {
				position: relative;
				width: 40rpx;
				height: 42rpx;
				overflow: visible;

				.pic {
					width: 100%;
					height: 100%;
				}

				.text {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					color: rgb(51, 51, 51);
					font-family: PingFang;
					font-size: 22rpx;
					font-weight: 500;
					line-height: 40rpx;
				}
			}

			.left {
				transform: rotateY(180deg);

				.text {
					left: 50%;
					transform: translateX(-50%) rotateY(-180deg);
				}
			}
		}
	}

	.popup {
		padding: 30rpx 10rpx;
		background-color: #fff;

		.p-item {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFang;
			font-size: 30rpx;
			font-weight: 500;
		}
	}

	.hover {
		background-color: #0001;
	}
</style>